<div class="fixed-action-btn">
  <button
    class="blue btn-floating btn-large waves-effect waves-light scale-transition scale-out"
    (click)="onPageUp()"
  >
    <svg class="center" style="width: 32px; height: 32px;" viewBox="0 0 24 24">
      <path
        fill="#ffffff"
        d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z"
      />
    </svg>
  </button>
</div>

<div class="row">
  <div class="col s12 l3">
    <div div class class="table-of-contents">
      <h3 class="title">
        <a href="https://arch.run">Arch.run Template</a>
      </h3>
      <div class="title-based-on">
        demo from <a href="https://arch.run" target="_blank">arch.run</a>
      </div>
      <ul>
        <li class="menu-subtitle"><span>Topics</span></li>
        <li><a href="https://arch.run/introduce">Summary</a></li>
        <li><a href="#emphasis">Technology</a></li>
        <li><a href="#lists">Life</a></li>
        <li class="menu-subtitle"><span>Some Friends</span></li>
        <li><a href="#images">Images</a></li>
        <li class="menu-subtitle"><span>Github Open Source</span></li>
        <li><a href="#links">Links</a></li>
      </ul>
    </div>
  </div>
  <div class="col s12 l9">
    <!-- CONTENT FROM REMOTE URL -->
    <section id="remote-url">
      <h3 class="subtitle">Load Contents from remote</h3>
      <markdown>
        Using component with `src` property to fetch remote markdown file
        `assets/remote/demo.md`
      </markdown>
      <markdown [src]="'assets/remote/demo.md'"></markdown>
    </section>

    <markdown>
      Using directive with `src` property to fetch remote html file
      `assets/remote/demo.html`
    </markdown>
    <div markdown [src]="'assets/remote/demo.html'"></div>

    <section id="variable-binding">
      <h3 class="subtitle">Binding markdown content to Variable</h3>

      <markdown>
        Using component or directive with `data` property allow to bind a
        variable that will update the DOM when value changes
      </markdown>

      <textarea class="variable-textarea" [(ngModel)]="markdown"></textarea>
      <markdown class="variable-binding" [data]="markdown"></markdown>
    </section>

    <!-- PLUGINS - LineNumbers -->
    <section id="line-numbers">
      <h3 class="subtitle">Code Line Numbers plugin</h3>
      <markdown>
        The example below uses `lineNumbers` directive which uses default line
        offset of 1.
      </markdown>
      <markdown
        lineNumbers
        ngPreserveWhitespaces
        [src]="'assets/remote/line-numbers.html'"
      ></markdown>
    </section>

    <!-- HEADER -->
    <section id="headers">
      <h2 class="subtitle">Init MD Content from Source Code dir</h2>
      <pre> {{ headers }}</pre>
      <markdown>{{ emphasis }}</markdown>
    </section>
  </div>
</div>
